<template>
    <ContentBase>
      <div class="row justify-content-md-center">
        <div class="col-3">
        <form @submit.prevent="login"> <!-- 阻止它默认提交行为 -->
          <div class="mb-3">
            <label for="username" class="form-label">用户名</label>
            <input v-model="username" type="text" class="form-control" id="username" aria-describedby="emailHelp">
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">密码</label>
            <input v-model="password" type="password" class="form-control" id="password">
          </div>
          <div class="error_message">{{error_message}}</div>
          <button type="submit" class="btn btn-primary">登录</button>
      </form>
    </div>
      </div>
    </ContentBase>
   </template>
   
   <script>
 import ContentBase from '@/components/ContentBase.vue';
 import {ref} from "vue";
 import { useStore } from 'vuex';
 import router from '@/router/index';
   
   export default {
     name: 'LoginView',
     components: {
       ContentBase,
     },

     setup() {
      const store = useStore();
      let username = ref('');
      let password = ref('');
      let error_message = ref('');

      const login = () => {
        error_message.value = "";
        store.dispatch("login", { // 调用user.js文件中actions的login函数
          username: username.value,
          password: password.value,
          success() { // 作为data的回掉函数，将来会调用到actions的data里面
            router.push({name: 'UserListView'}); // 若登入成功跳转到userlist页面
          },
          error() {
            error_message.value = "用户名或密码错误";
          }
        })
      };
      return {
        username,
        password,
        error_message,
        login,
      }
     }
   }
   </script>
   
   <style scoped>
 button{
  width: 100%;
 }

 .error_message{
  color: red;
 }
   </style>